import React from 'react'
import { Link, Outlet } from 'react-router-dom'

const Profile: React.FC = () => {
  const companions = [
    {
      id: '1',
      name: 'Emma_AI',
      avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
    },
    {
      id: '2',
      name: 'Sophie_AI',
      avatar: 'https://images.unsplash.com/photo-1503185912284-5271ff81b9a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
    },
    {
      id: '3',
      name: 'Lisa_ASMR',
      avatar: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
    },
  ]

  return (
    <>
      <Outlet />
      <div className="min-h-screen bg-app-dark text-white pb-20">
        {/* Status Bar */}
        <div className="h-11 bg-app-dark flex justify-between items-center px-4">
          <div className="text-xs">9:41</div>
          <div className="flex space-x-2">
            <i className="fas fa-signal"></i>
            <i className="fas fa-wifi"></i>
            <i className="fas fa-battery-full"></i>
          </div>
        </div>

        {/* Profile Header */}
        <div className="bg-gradient-to-b from-pink-500 to-app-dark pt-4 pb-20 relative">
          <div className="px-4 flex justify-between">
            <h1 className="text-xl font-bold">My Profile</h1>
            <Link to="/profile/settings">
              <i className="fas fa-cog text-xl"></i>
            </Link>
          </div>
          <div className="absolute -bottom-10 left-1/2 transform -translate-x-1/2">
            <div className="w-24 h-24 rounded-full border-4 border-white overflow-hidden bg-gray-800">
              <img
                src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
                alt="User Avatar"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>

        {/* Profile Info */}
        <div className="text-center mt-14">
          <h2 className="text-lg font-bold">Alex Johnson</h2>
          <p className="text-gray-400 text-sm">@alex_j • Premium Member</p>
          <button className="bg-gray-800 text-white text-sm rounded-full px-4 py-1 mt-2">
            Edit Profile
          </button>
        </div>

        {/* Profile Stats */}
        <div className="flex justify-around py-4 border-b border-gray-800">
          <div className="text-center">
            <div className="text-lg font-bold">24</div>
            <div className="text-xs text-gray-400">Companions</div>
          </div>
          <div className="text-center">
            <div className="text-lg font-bold">156</div>
            <div className="text-xs text-gray-400">Favorites</div>
          </div>
          <div className="text-center">
            <div className="text-lg font-bold">589</div>
            <div className="text-xs text-gray-400">Watched</div>
          </div>
        </div>

        {/* Subscription */}
        <div className="px-4 pt-6 pb-3">
          <h3 className="font-bold text-lg mb-3">My Subscription</h3>
          <div className="bg-gray-800 rounded-xl overflow-hidden">
            <div className="bg-gradient-to-r from-pink-500 to-orange-500 p-4 flex justify-between items-center">
              <div className="font-bold">
                Premium Unlimited <span className="bg-white text-pink-500 rounded-full px-2 py-0.5 text-xs ml-2">ACTIVE</span>
              </div>
              <div className="text-sm">Renews in 18 days</div>
            </div>
            <div className="p-4">
              <div className="flex justify-between mb-3">
                <div className="text-sm text-gray-400">Subscription type</div>
                <div className="font-semibold">Premium Unlimited</div>
              </div>
              <div className="flex justify-between mb-3">
                <div className="text-sm text-gray-400">Price</div>
                <div className="font-semibold">$19.99/month</div>
              </div>
              <div className="flex justify-between mb-3">
                <div className="text-sm text-gray-400">Next billing date</div>
                <div className="font-semibold">October 15, 2023</div>
              </div>
              <div className="flex justify-between mb-4">
                <div className="text-sm text-gray-400">Payment method</div>
                <div className="font-semibold">
                  <i className="fab fa-cc-visa mr-1"></i> •••• 3492
                </div>
              </div>
              <button className="w-full bg-gray-700 text-white rounded-full py-2 text-sm font-bold">
                Manage Subscription
              </button>
            </div>
          </div>
        </div>

        {/* Active Companions */}
        <div className="px-4 pt-4 pb-3">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-bold">My AI Companions</h3>
            <span className="text-sm text-pink-500">See All</span>
          </div>
          <div className="flex space-x-4 overflow-x-auto pb-2">
            {companions.map((companion) => (
              <div key={companion.id} className="flex-shrink-0 w-20">
                <div className="w-20 h-20 rounded-full overflow-hidden border-2 border-pink-500">
                  <img
                    src={companion.avatar}
                    alt={companion.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <p className="text-center text-xs mt-1">{companion.name}</p>
              </div>
            ))}
            <div className="flex-shrink-0 w-20">
              <div className="w-20 h-20 rounded-full overflow-hidden border-2 border-gray-700 flex items-center justify-center bg-gray-800">
                <i className="fas fa-plus text-gray-400"></i>
              </div>
              <p className="text-center text-xs mt-1">Add New</p>
            </div>
          </div>
        </div>

        {/* Settings Menu */}
        <div className="px-4 pt-4 pb-24">
          <h3 className="font-bold mb-2">Settings</h3>
          <div className="bg-gray-800 rounded-xl overflow-hidden">
            <div className="flex items-center p-4 border-b border-gray-700">
              <i className="fas fa-credit-card text-pink-500 w-6 mr-4"></i>
              <div>Payment Methods</div>
              <i className="fas fa-chevron-right text-gray-500 ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-gray-700">
              <i className="fas fa-shield-alt text-pink-500 w-6 mr-4"></i>
              <div>Privacy & Security</div>
              <i className="fas fa-chevron-right text-gray-500 ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-gray-700">
              <i className="fas fa-bell text-pink-500 w-6 mr-4"></i>
              <div>Notifications</div>
              <i className="fas fa-chevron-right text-gray-500 ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-gray-700">
              <i className="fas fa-download text-pink-500 w-6 mr-4"></i>
              <div>Downloads</div>
              <i className="fas fa-chevron-right text-gray-500 ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-gray-700">
              <i className="fas fa-question-circle text-pink-500 w-6 mr-4"></i>
              <div>Help & Support</div>
              <i className="fas fa-chevron-right text-gray-500 ml-auto"></i>
            </div>
            <div className="flex items-center p-4">
              <i className="fas fa-sign-out-alt text-red-500 w-6 mr-4"></i>
              <div className="text-red-500">Sign Out</div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Profile 